<template>
  <div>
    <el-row :gutter="20">
      <div class="app-container">
        <el-row :gutter="20">
          <el-col :span="8"
            ><span class="el-custom-title"
              >物料齐套检查</span
            ></el-col
          >
          <el-col :span="16" style="float:right;">
            <el-button-group style="float:right;">
              <el-button type="primary" icon="el-icon-refresh" @click="fecthData()" size="mini"
                >重新检测</el-button
              >
            </el-button-group>
          </el-col>
        </el-row>
        <el-row type="flex" justify="start">
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            @row-click="rowClick"
            @selection-change="handleSelectionChange"
            ref="dataForm"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
              align="center"
              label="序号"
              width="95"
              v-if="false"
            >
              <template slot-scope="scope">
                {{ scope.row.Id }}
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="物料主表Id"
              width="95"
              v-if="false"
            >
              <template slot-scope="scope">
                {{ scope.row.materialMstId }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="物料编号" width="95">
              <template slot-scope="scope">
                {{ scope.row.smaterialCode }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="物料名称" width="95">
              <template slot-scope="scope">
                {{ scope.row.materialName }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="bom款式规格主Id"
              width="95"
              v-if="false"
            >
              <template slot-scope="scope">
                {{ scope.row.iBomStyleSpecMstId }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="详细物料ID"
              width="95"
              v-if="false"
            >
              <template slot-scope="scope">
                {{ scope.row.materialDtlId }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="详细物料编号" width="120">
              <template slot-scope="scope">
                {{ scope.row.sdtlmaterialCode }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="支线Id"
              width="95"
              v-if="false"
            >
              <template slot-scope="scope">
                {{ scope.row.produceProcedureBranchId }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="Bom数量"
              width="95"
              v-if="false"
            >
              <template slot-scope="scope">
                {{ scope.row.qty }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="订单号" width="95">
              <template slot-scope="scope">
                {{ scope.row.sorderno }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="产品编号" width="95">
              <template slot-scope="scope">
                {{ scope.row.productNo }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="物料比率" width="95">
              <template slot-scope="scope">
                {{ scope.row.ratio }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="损失率" width="120">
              <template slot-scope="scope">
                {{ scope.row.nwastage }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="损失量" width="95">
              <template slot-scope="scope">
                {{ scope.row.wastQty }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="损失单位" width="95">
              <template slot-scope="scope">
                {{ scope.row.nUnitLoss }}
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            :page-sizes="listQuery.pageSizes"
            @pagination="fetchData"
          />
        </el-row>
      </div>
    </el-row>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

import {
  getAll,
  getList,
  create,
  update,
  deleteBatch,
  getProduceMaterialBom,
  getOrderProductMaterial,
  getAllOrderProductMaterial
} from "@/api/procedure/produce/produceWEDFApi";

import { get } from "js-cookie";

export default {
  name: "mesproducewedfcheckchild",
  components: { Pagination },
  data() {
    return {
      data: [],
      list: [],
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
        pageSizes: [10, 20, 30]
      },
      curMesproduceprocedureId: 0,
      dialogFormVisible: false,
      dialogImportVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "创建",
        import: "导入"
      },

      temp: {
        id: 0,
        ProcedureSetId: "",
        produceprocedureId: "",
        ordered: 0,
        comment: ""
      },
      tempImport: {
        workSectionId: 0,
        parentId: -1
      },
      //表格變量
      lstSelected: [],
      lstProcedureSetIds: [],
      spanArr: [],
      position: 0
    };
  },
  props: {
    mesproduceprocedureid: {},
    mesproduceprocedureids: {}
  },
  watch: {
    mesproduceprocedureid: function(newVale, oldValue) {
      if (newVale != null) {
        this.curMesproduceprocedureId = newVale;
      }
    },
    deep: true
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      let param = {
        page: this.listQuery.page,
        size: this.listQuery.limit,
        schedulePeriod: "",
        schedulePeriodType: 0,
        orderNo: "",
        productNo: ""
      };
      this.listLoading = true;
      getOrderProductMaterial(param).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.listLoading = false;
        // this.rowspan();
      });
    },
    rowClick(row, column, event) {
      this.currentTherbligsTypeId = row.id;
      //this.getTherbligs()
    },

    selectChange() {},

    handleSelectionChange(val) {
      this.lstSelected = val;
      this.temp = Object.assign({}, cur);
    },
    closeChild(val) {
      this.dialogImportVisible = val;
    },
    rowspan() {
      this.list.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1);
          this.position = 0;
        } else {
          if (
            this.list[index].procedureNo === this.list[index - 1].procedureNo
          ) {
            this.spanArr[this.position] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.position = index;
          }
        }
      });
    }
    //    objectSpanMethod({ row, column, rowIndex, columnIndex }) {  //表格合并行
    // 	if (columnIndex === 0) {
    // 		const _row = this.spanArr[rowIndex];
    // 		const _col = _row>0 ? 1 : 0;
    // 		return {
    // 			rowspan: _row,
    // 			colspan: _col
    // 		}
    // 	}
    // 	if(columnIndex === 1){
    // 		const _row = this.spanArr[rowIndex];
    // 		const _col = _row>0 ? 1 : 0;
    // 		return {
    // 			rowspan: _row,
    // 			colspan: _col
    // 		}
    // 	}
    //   	if(columnIndex === 2){
    // 		const _row = this.spanArr[rowIndex];
    // 		const _col = _row>0 ? 1 : 0;
    // 		return {
    // 			rowspan: _row,
    // 			colspan: _col
    // 		}
    // 	}
    //   	if(columnIndex === 3){
    // 		const _row = this.spanArr[rowIndex];
    // 		const _col = _row>0 ? 1 : 0;
    // 		return {
    // 			rowspan: _row,
    // 			colspan: _col
    // 		}
    // 	}
    //   	if(columnIndex === 4){
    // 		const _row = this.spanArr[rowIndex];
    // 		const _col = _row>0 ? 1 : 0;
    // 		return {
    // 			rowspan: _row,
    // 			colspan: _col
    // 		}
    // 	}
    // },
  }
};
</script>
<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
